<template>
  <div class="right-bar">
    <div class="panel">
      <div class="panel-header">
        <i class="fa fa-volume-up"></i>
        公告
      </div>
      <div class="panel-container">
        <ul class="notice-list">
          <li><i class="fa fa-circle"></i><a @click="openalert">五一放假通知——人事部</a></li>
          <li><i class="fa fa-circle"></i><a @click="openalert">项目截至时间调整至6月15日——开发部</a></li>
          <li><i class="fa fa-circle"></i><a @click="openalert">春季风大请各位同事注意保暖——人事部</a></li>
          <li><i class="fa fa-circle"></i><a @click="openalert">最新通讯录已发送至各位邮箱请查收——人事部</a></li>
          <li><i class="fa fa-circle"></i><a @click="openalert">原型设计应注意的地方——设计部</a></li>
        </ul>
      </div>
    </div>

    <div class="panel">
      <div class="panel-header">
        待办事项
      </div>
      <div class="panel-container">
        <ul>
          <li>无</li>
        </ul>
      </div>
    </div>

    <div class="panel">
      <div class="panel-header">
        今日请假员工
      </div>
      <div class="panel-container">
        <ul class="avatar-list">
          <li>
            <a @click="openalert2">
              <img src="../../assets/avatar.png" alt="李玲">
              <p>李玲</p>
            </a>
          </li>
          <li>
            <a @click="openalert2">
              <img src="../../assets/avatar2.png" alt="李玲">
              <p>李玲</p>
            </a>
          </li>
          <li>
            <a @click="openalert2">
              <img src="../../assets/avatar3.png" alt="李玲">
              <p>李玲</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    methods: {
      openalert() {
        alert('当前为演示账号，无查看公告权限')
      },
      openalert2() {
        alert('当前为演示账号，无查看请假员工权限')
      }
    }
  }
</script>

<style>
  .right-bar {
    float: right;
    height: 100%;
    width: 500px;
    background: #e9eef6;
  }

  .right-bar .panel .panel-header i {
    color: #a7a7a7;
    margin-right: 10px;
  }

  .right-bar .panel .notice-list li {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }

  .right-bar a {
    cursor: pointer;
  }

  .right-bar .panel .panel-container li i {
    font-size: 5px;
    margin-right: 10px;
  }

  .right-bar .panel .panel-container li:nth-child(1) i {
    color: #ff9743;
  }

  .right-bar .panel .panel-container li:nth-child(2) i {
    color: #cd59f3;
  }

  .right-bar .panel .panel-container li:nth-child(3) i {
    color: #ff9743;
  }

  .right-bar .panel .panel-container li:nth-child(4) i {
    color: #ff9743;
  }

  .right-bar .panel .panel-container li:nth-child(5) i {
    color: #41c8ad;
  }

  .avatar-list {
    margin-top: 15px;
  }

  .avatar-list li {
    float: left;
    width: 100px;
    height: 100px;
    text-align: center;
  }

  .avatar-list li img {
    width: 70px;
    height: 70px;
    vertical-align: center;
  }
</style>
